<!-- 动态上下翻滚的表格 -->
<template>
    <div class="table-wrap">
      <div class="titleContent">
        <div class="tit">工站编号</div>
        <div class="tit">工站名称</div>
        <div class="tit">状态</div>
        <div class="tit">数量</div>
        <div class="tit">ok数</div>
        <div class="tit">ng数</div>
      </div>

   <div  class="scroll">
    <vue3ScrollSeamless 
     ref="seamlessScroll" :listData="tableData"
    :classOptions="classOptions" >

    <template #custom-render="{ item }">
        <div class="countContent"  >
          
          <div class="descr">{{ item.Code }}</div>
          <div class="descr">{{ item.Name }}</div>
          <div class="descr">{{ item.State }}</div>
          <div class="descr">{{ item.Count }}</div>
          <div class="descr">{{ item.OkCount }}</div>
          <div class="descr">{{ item.NgCount }}</div>
        </div>
    </template>
        <!-- <div class="countContent" v-for="(item, i) in tableData" :key="i">
          
          <div class="descr">{{ item.Code }}</div>
          <div class="descr">{{ item.Name }}</div>
          <div class="descr">{{ item.State }}</div>
          <div class="descr">{{ item.Count }}</div>
          <div class="descr">{{ item.OkCount }}</div>
          <div class="descr">{{ item.NgCount }}</div>
        </div> -->

    </vue3ScrollSeamless>
   </div>
    


    </div>
  </template>
   
  <script setup lang="ts">

  import vue3ScrollSeamless from "@/views/business/bigScreen/components/infinite-scroll.vue";
const classOptions = {
            limitMoveNum: 6,
        };
//   import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

  let kkk = 0;
  const listData = Array.from({ length: 20 }, (_, i) => ({
    id: ++kkk ,
    dateTime: "2022-05-03",
      startTime: "2022-05-03",
      endTime: "2022-05-03",
      shouldArriveNumber: "1",
      actualAttendance: "100",
      bl: "10%"
}));

const tableData = reactive([
    {Code:"OP20",Name:"盖板组装",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP30",Name:"底板组装",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP50",Name:"盖板翅片中板",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP60",Name:"盖板底板焊丝组合",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP70",Name:"钎焊工装组装",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP80",Name:"钎焊",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP90",Name:"热处理",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP100",Name:"气密检测",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP70",Name:"钎焊工装组装",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP80",Name:"钎焊",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP90",Name:"热处理",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP100",Name:"气密检测",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP80",Name:"钎焊",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP90",Name:"热处理",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP100",Name:"气密检测",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP60",Name:"盖板底板焊丝组合",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP90",Name:"热处理",State:"在线",Count:0,OkCount:0,NgCount:0},
    {Code:"OP60",Name:"盖板底板焊丝组合",State:"在线",Count:0,OkCount:0,NgCount:0},
    
])

  const periodDataList = reactive(listData);
  const seamlessScroll = ref(null);


  </script>
   
  <style lang="scss" scoped>
  .table-wrap {
    width: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    font-size: 20px;
    // padding: 0 20px;
    color: #ffffff;
    .scroll {
      flex:1;
      overflow: hidden;
    }
  }
  .titleContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    .tit {
      flex: 0 0 16.6%;
      text-align: center;
    }
  }
  .countContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
   
    .descr {
      flex: 0 0 16%;
      padding: 10px 0;
      text-align: center;
    }
  }
//   .countContent:nth-of-type(odd) {
//     background: #318699 !important;
//     .descr {
//       border-right: 1px solid #247587;
//     }
//   }

:deep(.scroll-row-item:nth-of-type(odd) )
  {
    background: #318699 !important;
    .countContent{
        .descr {
                border-right: 1px solid #247587;
            }
    }
    
  }
  </style>


